<template>
	<van-popup v-model:show="state.show" destroy-on-close position="right" teleport="body"
		@close="emit('update:visiable',false)">
		<div class="w-screen h-screen flex flex-col">
			<div>
				<CpNavBar title="城市索引" :back="back"></CpNavBar>
			</div>
			<div class="w-screen flex-1 overflow-y">
				<van-index-bar :index-list="cpIndexList">
					<template v-for="c in cpCity">
						<van-index-anchor :index="c.provinceName" @click="handleCitySelect(c.provinceName)" />
						<van-cell :title="d.cityName" v-for="d in c.citys" @click="handleCitySelect(d.cityName)" />
					</template>
				</van-index-bar>
			</div>
		</div>

	</van-popup>
</template>

<script setup lang="ts">
	import { computed, reactive, watch } from 'vue';
	import city from '@/assets/js/city.json'

	const props = defineProps<{
		visiable : boolean
	}>()

	const emit = defineEmits(['update:visiable', 'sel'])

	const state = reactive({
		show: false
	})

	const cpCity = computed(() => {
		let res = city.provinces
		return res
	})

	// 自定义索引列表
	const cpIndexList = computed(() => {
		let res = []
		res = city.provinces.map(d => d.provinceName)
		return res
	})

	const back = () => {
		emit('update:visiable', false)
	}

	const handleCitySelect = (e : any) => {
		emit('sel', e)
		emit('update:visiable', false)
	}

	watch(() => props.visiable,
		(newVal) => {
			state.show = newVal
		}, {})
</script>

<style>
</style>